iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0

Hello, 各位 iT邦幫忙 的粉絲們大家好~~~

本篇是 Re: 從零開始用 Xamarin 技術來複刻過去開發的一個 App: TopStore 系列文的 EP20。

本篇是來介紹一下如何設定 App 的 "自訂啟動畫面" 的唷!

不過其實各位應該會發現,從上一篇 EP19 開始,如果是屬於各平台本身的設定,就需在各平台的對應專案上進行設計。

所以如果是針對 "App 自訂啟動畫面" 的部分,就得把 Android、iOS 平台拆開來處理了,這不屬於 Xamarin.Forms 能管轄到的範疇。

所以...本篇就先針對 Android 平台要進行的處理來做介紹囉!

Go~~~


Visual Studio 當中透過方案總管在 Android 專案中來新增一個 Activity(活動)。
Android 專案加入新的 Activity(活動) 1

把此新增的 Activity(活動) 命名為 SplashActivity。
Android 專案加入新的 Activity(活動) 2

新增 SplashActivity 完成後會如下圖呈現。
Android 專案加入新的 Activity(活動) 3

在 SplashActivity 的類別上,掛上相關的 ActivityAttritube,並且針對 Label、Theme、MainLauncher 與 NoHistory 屬性作其設定。
修改 SplashActivity 的類別設定 1

完成後在 SplashActivity 的類別中,覆寫 (override) 掉所繼承的基底 Activity 類別設計的兩個方法: OnResume、OnBackPressed。
修改 SplashActivity 的類別設定 2

回到 SplashActivity 的類別 ActivityAttritube 的 Theme 設定,在其 Android 專案底下的 Resources 找到 value 資料夾當中的 styles.xml。
修改 styles.xml 設定 1

開啟 styles.xml 空白專案的原始預設值會是如下圖。
修改 styles.xml 設定 2

針對 styles.xml 處理有需要用到的 Theme 設定撰寫。
修改 styles.xml 設定 3

在上圖的 Theme 設定中有使用到一個 splash_screen 的部分,於是找到 Android 專案 Resources 底下的 drawable 資料夾,並且新增一個 xml 檔。
splash_screen 的設計 1

把此 xml 檔命名為 splash_screen。
splash_screen 的設計 2

新增完畢後的空白 xml 檔。
splash_screen 的設計 3

在 splash_screen.xml 當中撰寫設計畫面的 XML,注意到其中設計了讀取 mipmap 底下的 launcher 圖檔,並且置中顯示。
splash_screen 的設計 4

在 Android 專案的 Resources 的每個 mipmap-***dpi 資料夾中放置一張 launcher 圖檔。
launcher 圖檔的設置 1

新增至 Android 專案。(並且確定建置動作為 "AndroidResource")
launcher 圖檔的設置 2

完成加入。
launcher 圖檔的設置 3

最後打開 Android 專案底下的 MainActivity,並且注意到其 Activity 的 Attritube 當中的 MainLauncher、Label 屬性設定刪除。(主要是 MainLauncher 的屬性)
Activity 的 Attritube 設定修改 1

MainActivity 的 Activity 的 Attritube 修改完畢。
Activity 的 Attritube 設定修改 2

Android 平台的 App 啟動畫面撰寫完成,執行效果如下。
Android 平台的 App 執行效果

唷~~最基本的效果完成囉!

如果有興趣也可以自行研究一下背景漸層的效果喔^_<
Android 平台的 App 執行效果

那就到下一篇 EP21 再來繼續介紹 iOS 平台的 "App 啟動畫面" 處理吧!

蹦掰蹦掰~~~


上一篇
EP 19: Custom App Icon for Android and iOS
下一篇
EP 21: Custom Launch Screen for iOS
系列文
Re: 從零開始用 Xamarin 技術來復刻過去開發的一個 App : TopStore32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言